<template>
  <div>
    <div>
      <el-input
        v-model="searchInfo.tittle"
        placeholder="直播标题"
        style="marginRight:3px;width:120px;"
      />
      <el-select
        v-model="searchInfo.status"
        clearable
        placeholder="是否上架"
        style="width:120px;marginRight:3px;"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="dataPickStart"
        type="daterange"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-input v-model="queryTime" placeholder="直播时长" style="width:120px;"></el-input>
      <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      <el-button type="primary" @click="exportData">导 出</el-button>
    </div>
    <el-table border :data="tableData" stripe style="margin-top:10px;">
      <el-table-column show-overflow-tooltip label="录播标题">
        <template slot-scope="scope">
          <span
            v-if="accreditChildren.editorLiveRecording"
            style="margin-right: 15px;color:rgb(64, 158, 255);cursor:pointer;"
            @click="jump(scope.row.id)"
          >{{ scope.row.id ? scope.row.tittle :"&nbsp;" }}</span>
          <span v-else>{{ scope.row.id ? scope.row.tittle :"&nbsp;" }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="startTime" label="开始时间" />
      <el-table-column show-overflow-tooltip prop="creationTime" label="结束时间" />
      <el-table-column show-overflow-tooltip prop="giftsNum" label="礼物总数" />
      <el-table-column show-overflow-tooltip label="录播时长">
        <template slot-scope="scope">{{getformatTimer(scope.row.duration)}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="numberViewers" label="最高在线人数" />
      <el-table-column label="是否上架">
        <template slot-scope="scope">
          <span v-if="scope.row.id">{{ scope.row.status === true ?"是":"否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px;">
        <template slot-scope="scope">
          <div v-if="scope.row.id">
            <span
              v-if="!scope.row.status && accreditChildren.upLiveRecording"
              style="margin-right: 15px;color:rgb(64, 158, 255);cursor:pointer;"
              @click="changeStatus(scope.row.id,'up')"
            >上架</span>
            <span v-else>
              <span
                v-if="accreditChildren.upLiveRecording"
                style="margin-right: 15px;color:rgb(64, 158, 255);cursor:pointer;"
                @click="changeStatus(scope.row.id,'down')"
              >下架</span>
            </span> 
            <span
              v-if="accreditChildren.queryLiveReQuestion"
              style="margin-right: 15px;color:rgb(64, 158, 255);cursor:pointer;"
              @click="searchRecorded(scope.row.id)"
            >录播问题</span>
            <span class="_primary" @click="downloadFile(scope.row)">下载</span>
            <span
              v-if="accreditChildren.memberWatch"
              style="margin-right: 15px;color:rgb(64, 158, 255);cursor:pointer;"
              @click="watchTime(scope.row.id)"
            >观看详情</span>
            <span class="_primary" @click="exportData(scope.row)">导出</span>
            <span
              v-if="accreditChildren.deleteLiveRecording"
              style="margin-right: 15px;color:#f56c6c;cursor:pointer;"
              @click="deleteInfo(scope.row)"
            >删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="right"
      :current-page="page.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      :modal-append-to-body="false"
      title="录播问题"
      center
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
    >
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="content" label="问题" />
        <el-table-column prop="vote" label="票数" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="会员观看时长"
      center
      :modal-append-to-body="false"
      :visible.sync="dialogVisible1"
      width="700px"
      :before-close="handleClose1"
    >
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column prop="nickName" label="会员昵称" />
        <el-table-column label="时长">
          <template slot-scope="scope">{{getformatTimer(scope.row.duration)}}</template>
        </el-table-column>
      </el-table>
      <div class="clearfix">
        <el-pagination
          style="margin-top:15px;"
          class="right"
          :current-page="page1.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page1.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount2"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button type="primary" @click="handleClose1">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑直播记录"
      center
      :modal-append-to-body="false"
      :visible.sync="dialogVisibleRecord"
      width="700px"
      :before-close="handleCloseRecord"
    >
      <createLiveRecord :id="createLiveRecordId" :dialog-visible-record="dialogVisibleRecord" />
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import mmUrl from "~/utils/utilUrl";
import Pagination from "~/components/commom/pagination";
import createLiveRecord from "./createLiveRecord";
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  _getformatTimer
} from "~/utils/util";
export default {
  components: {
    Pagination,
    createLiveRecord
  },
  props: ["id", "accreditChildren"],
  data() {
    return {
      dataPickStart: "",
      queryTime: "",
      createLiveRecordId: "",
      dialogVisibleRecord: false,
      statusOptions: [
        {
          label: "是",
          value: true
        },
        {
          label: "否",
          value: false
        }
      ],
      liveHistoryViewId: null,
      dialogVisible1: false,
      loading: false,
      changeSelectOr: false,
      totalCount: 0,
      tableData: [],
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      page1: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      searchInfo: {
        id: this.$props.id,
        keyword: "",
        liveId: "",
        status: null
      },
      copySearchInfo: {
        id: this.$props.id,
        keyword: "",
        liveId: "",
        status: null
      },
      dialogVisible: false,
      tableData1: [],
      totalCount1: 0,
      tableData2: [],
      totalCount2: 0
    };
  },
  watch: {
    "$props.id"() {
      this.getInitTableDate();
    }
  },
  mounted() {
    this.getInitTableDate();
  },
  methods: {
    download(blobUrl, option) {
      const a = document.createElement("a");
      a.download = decodeURI(option);
      a.href = blobUrl;
      a.click();
      window.URL.revokeObjectURL(blobUrl);
    },
    exportData(res) {
      let getUrl = `manage/liveHistory/exportLiveHistory?id=${
        this.$props.id
      }&type=1${this.queryTime ? "&queryTime" + this.queryTime : ""}
      ${
        this.dataPickStart && this.dataPickStart.length
          ? "&startTime=" +
            this.dataPickStart[0] +
            "&endTime=" +
            this.dataPickStart[1]
          : ""
      }${this.searchInfo.tittle ? "&tittle=" + this.searchInfo.tittle : ""}
      ${this.searchInfo.status ? '&status='+this.searchInfo.status : ''}`;
      axios({
        headers: {
          "Content-Type": "application/octet-stream"
        },
        responseType: "blob",
        url: res.id
          ? `manage/liveHistory/exportLiveHistory?id=${res.id}&type=0`
          : getUrl
      }).then(res => {
         if (res.headers["content-disposition"]) {
          var a = res.headers["content-disposition"].split("=")[1];
          this.download(window.URL.createObjectURL(res.data), a);
        } else {
          this.$message.error("数据不存在");
        }
      });
    },
    getformatTimer(timer) {
      return _getformatTimer(timer);
    },
    downloadFile(res) {
      // window.location.href = res.liveUrl
    },
    handleCloseRecord() {
      this.dialogVisibleRecord = false;
    },
    jump(id) {
      this.createLiveRecordId = id;
      this.dialogVisibleRecord = true;
    },
    watchTime(res) {
      this.dialogVisible1 = true;
      this.liveHistoryViewId = res;
      this.$post({
        url: mmUrl.liveHistory.view,
        data: {
          id: res,
          keyword: "",
          page: this.page1
        }
      }).then(res => {
        this.tableData2 = res.items.items;
        this.totalCount2 = res.items.totalCount;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose1() {
      this.dialogVisible1 = false;
    },
    getInitTableDate() {
      this.$post({
        url: mmUrl.liveHistory.get,
        data: {
          keyword: "",
          id: this.$props.id,
          tittle: "",
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 20,
            skipCount: 0
          }
        }
      }).then(res => {
        this.totalCount = res.items.totalCount;
        this.tableData = res.items.items;
      });
    },
    searchRecorded(res) {
      this.$post({
        url: mmUrl.question.get,
        data: {
          liId: res,
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 20,
            skipCount: 0
          },
          type: 1
        }
      }).then(res => {
        this.tableData1 = res.items.items;
        this.totalCount1 = res.items.totalCount;
        this.dialogVisible = true;
      });
    },
    handleSizeChange1(res) {
      this.page1.pageSize = res;
      this.watchTime(this.liveHistoryViewId);
    },
    handleCurrentChange1(res) {
      this.page1.pageNo = res;
      this.watchTime(this.liveHistoryViewId);
    },
    deleteInfo(row) {
      const that = this;
      _deleteMethods(mmUrl.liveHistory.delete, row, that).then(() => {
        that.searchInfoMation("no");
      });
    },
    changeStatus(res, st) {
      this.$post({
        url: mmUrl.liveHistory.editor,
        data: {
          item: {
            id: res,
            status: st === "up"
          }
        }
      }).then(() => {
        this.$message({ type: "success", message: "操作成功" });
        this.searchInfoMation("no");
      });
    },
    searchInfoMation(res) {
      if (this.queryTime) {
        if (isNaN(this.queryTime)) {
          this.$message.error("直播时长请输入正整数");
          return false;
        } else if (this.queryTime < 0) {
          this.$message.error("直播时长请输入正整数");
          return false;
        } else {
          this.searchInfo.queryTime = this.queryTime;
        }
      } else {
        delete this.searchInfo.queryTime;
      }
      if (this.dataPickStart && this.dataPickStart.length) {
        this.searchInfo.startTime = this.dataPickStart[0];
        this.searchInfo.endTime = this.dataPickStart[1];
      } else {
        this.searchInfo.startTime = "";
        this.searchInfo.endTime = "";
      }
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo));
      const result = _searchInfo(res, this.page, this.copySearchInfo);
      this.changeTableData(result);
    },
    changeTableData(res) {
      const that = this;
      _changeTable(mmUrl.liveHistory.get, res, that);
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfo);
      this.changeTableData(result);
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo);
      this.changeTableData(result);
    }
  }
};
</script>
<style>
</style>
